<template>
	<view>
		<uni-card title="请输入待办事项">
			<uni-easyinput v-model="value" placeholder="请输入待办事件"></uni-easyinput>
			<button type="primary" @click="addItem"> 添加事项</button>
		</uni-card>
		
		<uni-card title="待办事项">
			<view class="todo_item" v-for="(item,index) in todolist" :key="index">
				<view class="">{{item}}</view>
				<uni-icons type="redo" size="25" style="color:aqua" @click="redo(index)"></uni-icons>
				<uni-icons type="close" size="25" style="color:aqua" @click="clear(index,'todo')"></uni-icons>
			</view>
		</uni-card>
		
		
		<uni-card title="已办事项">
			<view class="done_item" v-for="(item,index) in donelist" :key="index">
				<view class="">{{item}}</view>
				
				<uni-icons type="close" size="25" style="color:aqua" @click="clear(index,'done')"></uni-icons>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				todolist:["吃饭","睡觉","打豆豆"],
				donelist:['打球','考试','睡觉']
			}
		},
		methods: {
			addItem(){
				if(!this.value){
					uni.showToast({
						title:"事件输入不能为空",
						icon:"error"
					})
					return
				}
				
				this.todolist.push(this.value)
			},
			redo(index){
				// 添加已办事件数组中的数据
				var data=this.todolist[index]
				this.donelist.push(data)
				// 删除待办事件数组中的数据
				this.todolist.splice(index,1)
				
				
			},
			clear(index,name){
				if(name=='todo'){
					this.todolist.splice(index,1)
				}else{
					this.donelist.splice(index,1)
				}
			}
			
		}
	}
</script>

<style>
	.todo_item{
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.done_item{
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.todo_item view{
		flex: 1;
	}
	.done_item view{
		flex: 1;
	}
</style>
